<template>
  <div class="reset">
    <div class="header">
      <el-page-header @back="goBack" content="重置密码"> </el-page-header>
    </div>
    <div class="inp">
      <div class="inpOne">
        <input type="text" placeholder="账号" v-model="userV" /><br />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="旧密码" v-model="oldPwV" />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="新密码" v-model="newPwV" />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="请确认密码" v-model="twicePwV" />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="验证码" v-model="codeV" />
        <img :src="code && code" @click="getCode" alt="" />
        <div class="changeImg">
          <span>看不清</span>
          <span class="changeOne" @click="getCode">换一张</span>
        </div>
      </div>
    </div>
         <button @click="change" class="btn">确认修改</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "reset",
  data(){
      return{
          userV:"",
          oldPwV:"",
          newPwV:"",
          twicePwV:"",
          code:"",
          codeV:"",
      }
  },
  created(){
      this.getCode()
  },
  methods: {
    //返回上一頁
    goBack() {
      this.$router.back();
    },
    getCode() {
      //let api="https://elm.cangdu.org/v1/captchas"
      let api = this.eleUrl.yzcode;
      this.$http({
        url: api,
        method: "post",
        //用于用户代码是否应该在请求情况下，向其他域发送cookie，不使用缓存数据
        withCredentials: true,
        data: {},
      }).then((res) => {
        //console.log(res.data)
        this.code = res.data.code;
      });
    },
    //修改密码方法
    change(){
        let api=this.eleUrl.resetpw;
        this.$http({
            url:api,
            withCredentials:true,
            method:"post",
            data:{
                username:this.userV,
                oldpassWord:this.oldPwV,
                newpassword:this.newPwV,
                confirmpassword:this.twicePwV,
                captcha_code:this.codeV
            }
        }).then((res)=>{
          alert(res.data.success)
           // console.log(res.data)
        })
    }
  },
  computed: {
    ...mapState(["eleUrl"]),
  },
};
</script>

<style scoped>
.reset {
  font-size: 0.15rem;
}
.header >>> .el-page-header__content {
  color: white;
  font-weight: 500;
  margin-left: 0.7rem;
}
.header >>> .el-page-header {
  color: white;
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: rgb(80, 143, 238);
}
/* 输入框 */
.inp {
  margin-top: 0.15rem;
  background-color: #fff;
}
.inpOne {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  border-bottom: 1px solid #ddd;
}
.inpOne img {
  vertical-align: middle;
}
.inp input {
  border: none;
  outline: none;
  font-size: 0.16rem;
  margin-left: 0.1rem;
}
.switch {
  margin-left: 1rem;
}
.changeImg {
  width: 0.5rem;
  height: 0.5rem;
  float: right;
  font-size: 0.1rem;
  line-height: 0.25rem;
  text-align: center;
}
.changeOne {
  color: #4a90e6;
}
/* 确认修改 */
.btn{
    width: 96%;
    height: .4rem;
    display: block;
    margin: 0.1rem auto;
    border: none;
    color: white;
    font-size: .16rem;
    background-color: #67D96A;
    border-radius: 5px;
}
</style>